<template>
	<view class="page">
		
		<view class="carBox">
			<view class="box">
				<view class="head">
					<view><image :src="allSkuItemChoiced.pic ? allSkuItemChoiced.pic : ''" mode="" class="proImg"></image></view>
					<view>
						<view class="price">¥{{allSkuItemChoiced.price ? allSkuItemChoiced.price : '10.00'}}</view>
						<text style="color: #969696;font-size: 13px;">请选择规格</text>
					</view>
					<image src="http://bpic.588ku.com/element_pic/01/30/57/99573b1a6f730da.jpg" mode="" class="closeImg" @tap="close"></image>
				</view>
				<view class="" v-for="(spec, index) in specList" :key="index">
					<view style="padding: 20upx;">{{ spec.name }}</view>
					<view class="flex spec-box">
						<view @tap="bindChangeSpec(child.name,index,childIndex)" v-for="(child, childIndex) in spec.children" :key="childIndex" :class="[child.isShow ?'':'noneActive',child.active ?'active':'']">
							{{ child.name == null ? '' : child.name }}
						</view>
					</view>
				</view>
				<view class="clearB">
					<text>数量</text>
					<view class="right">
						<image src="http://bpic.588ku.com/element_pic/01/29/11/85573ad69164bea.jpg" mode="" class="carBtn" v-if="carNum == 1"></image>
						<image src="http://bpic.588ku.com/element_pic/01/29/11/85573ad69164bea.jpg" mode="" class="carBtn" @tap="reduce" v-else></image>
						<text>{{ carNum }}</text>
						<image src="http://bpic.588ku.com/element_pic/01/35/78/89573bf540176de.jpg" mode="" class="carBtn" @tap="add"></image>
					</view>
				</view>
				<view class="sureBtn">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			//商品详情
			// colorIndex: 0,
			// sizeIndex: 0,
			// color: '',
			// size: '',
			
			// HotList: [],
			// shopInfoData: {
			// 	followCount: 0,
			// 	goodCommentRate: 0,
			// 	id: 0,
			// 	nickName: 'string',
			// 	start: 0
			// }, // 商家信息
			// specsLen: 0,   // 级别
			// specsParentName: [],  // 父级名称
			// orederType: 1,
			// userInfo: '',
			
			
			matchData: {}, //存和选中的值进行匹配的数据
			skuSelectArr: [], //SKU被选中的值
			allSkuItemChoiced: {},//组合SKU都选中
			specList: [
				{
					name: '',
					children: [],
				}
			],
			carNum: 1,
		};
	},
	onLoad(e) {
		this.specsDataFun()
	},
	onReady() {},
	methods: {
		close() {
			this.carBol = false;
		},
		add() {
			this.carNum++;
		},
		reduce() {
			if (this.carNum == 1) {
				this.utils.showToast('不能再减了');
			}
			this.carNum--;
		},
		
		//选择规格事件
		bindChangeSpec(skuName,index, childrenIndex) {
			let specData = this.specList;
			specData[index].children.map((item, i) => {
				this.specList[index].children[i].active = false;
			});
			if (this.skuSelectArr[index] != skuName) {
				this.skuSelectArr[index] = skuName;
				this.specList[index].children[childrenIndex].active = true;
			} else {
				this.skuSelectArr[index] = "";
				this.specList[index].children[childrenIndex].active = false;
			}
			this.$set(this.specList, index, this.specList[index]);
			this.allSkuItemChoiced = {};
			this.checkSkuItem();
		},
		// 检测选中的sku组合是否可以选择
		checkSkuItem(){
			let [specData,result] = [this.specList, []];//result被选中的值
			for (let i in specData) {
				result[i] = this.skuSelectArr[i] ? this.skuSelectArr[i] : '';
			}
			for (let i in specData) {
				let last = result[i]; //选中的存到last
				for (let k in specData[i].children) {
					result[i] = specData[i].children[k].name;
					specData[i].children[k].isShow = this.isMatchStock(result); //isShow来判断是否可以选择
				}
				result[i] = last; //还原，记录点击的值，避免下一次循环被覆盖
			}
			if(this.matchData[this.skuSelectArr]){
				this.allSkuItemChoiced = this.matchData[this.skuSelectArr];
				console.log(this.allSkuItemChoiced)
			}
			this.specList = specData;
		},
		//判断匹配sku中的商品是否有库存
		isMatchStock(obj) {
			for (let i in obj) {
				//如果数组空，则返回true
				if (obj[i] == '') {
					return true;
				}
			}
			if(this.matchData[obj]){
				return this.matchData[obj].stock == 0 ? false : true;//匹配选中的库存，不为0 true，否则false
			}else{
				return false;
			}
		},

		// 规格数组处理
		specsDataFun(){
			let skulist = [
				{
					id: 58806154688701,
					lockStock: 0,
					lowStock: 0,
					pic: "aaaa",
					price: 11.11,
					productId: 1,
					promotionPrice: 9.9,
					sale: 11,
					skuCode: "",
					spData: '{"颜色":"黑色","尺码":"M","款式":"852085","价格":"W"}'
				},{
					id: 58806154688702,
					lockStock: 0,
					lowStock: 0,
					pic: "aaaa",
					price: 22.22,
					productId: 1,
					promotionPrice: 9.9,
					sale: 11,
					skuCode: "",
					spData: '{"颜色":"黑色","尺码":"XL","款式":"852041","价格":"Q"}'
				},{
					id: 58806154688702,
					lockStock: 0,
					lowStock: 0,
					pic: "aaaa",
					price: 22.22,
					productId: 1,
					promotionPrice: 9.9,
					sale: 11,
					skuCode: "",
					spData: '{"颜色":"白色","尺码":"S","款式":"852085","价格":"F"}'
				},{
					id: 58806154688702,
					lockStock: 0,
					lowStock: 0,
					pic: "aaaa",
					price: 22.22,
					productId: 1,
					promotionPrice: 9.9,
					sale: 11,
					skuCode: "",
					spData: '{"颜色":"白色","尺码":"M","款式":"852085","价格":"Q"}'
				},{
					id: 58806154688702,
					lockStock: 0,
					lowStock: 0,
					pic: "aaaa",
					price: 22.22,
					productId: 1,
					promotionPrice: 9.9,
					sale: 11,
					skuCode: "",
					spData: '{"颜色":"白色","尺码":"XL","款式":"852085","价格":"W"}'
				}
			]
			
			let data = skulist;
			let spData = [];
			if(data.length > 0){
				let skuArr = [];
				console.log(JSON.parse(data[0].spData))
				for (let key in JSON.parse(data[0].spData)) {
					skuArr.push({
						name: key,
						children: []
					})
				}
				let newArray = [];
				data.map((item,index,data) => {
					let spSubStr = [];
					let newData = (JSON.parse(item.spData));
					let arr = Object.entries(newData);
					for(let i=0; i<arr.length; i++){
						spSubStr.push(arr[i][1]);
						if(newArray.indexOf(arr[i][1]) == -1){ 
							newArray.push(arr[i][1]);
							skuArr[i].children.push({
								name: arr[i][1]
							})
						}
					}
					this.matchData[spSubStr] = item; //组合键值对，以方便和选中之后的值进行匹配
				})
				this.specList = skuArr;
				this.checkSkuItem();
			}
			
		}
	}
};
</script>

<style lang="less" scoped>
	.flex{
		display: flex;
	}
page {
	background: #eee;
	.choice {
		background: #fff;
		padding: 20upx 20upx;
		overflow: hidden;
		clear: right;
		font-size: 15px;
		.text-welfare {
			color: #ff2323;
			border: 1px solid #ff2323;
			padding: 2upx 12upx;
			border-radius: 30upx;
			font-size: 28upx;
		}
		.text-welfareDexc {
			margin-left: 30upx;
			color: #666;
			font-size: 28upx;
		}
	}
}
.colorGreen {
	color: #02c141;
}
.colorRed {
	color: #fb1f39;
}
.active {
	color: #ff2323;
	border: 1px solid #ff2323 !important;
	background: #fff !important;
}
.noneActive {
	background: #ccc;
	opacity: 0.4;
	color: #000;
	pointer-events: none;
}
.spec-box {
	color: #333;
	view {
		padding: 4upx 8upx;
		border-radius: 10upx;
		background: #dfdfdf;
		font-size: 24upx;
		margin: 0 20upx 20upx 20upx;
		border: 1px solid rgba(0, 0, 0, 0);
	}
}
.imgList {
	width: 100%;
	height: 500upx;
	position: relative;
	.swiper,
	.banner-img {
		width: 94%;
		height: 500upx;
		margin: auto 3%;
	}
	.imgNumber {
		position: absolute;
		right: 20upx;
		bottom: 20upx;
		background: #999;
		color: #fff;
		font-size: 12px;
		padding: 0 20upx;
		border-radius: 20upx;
	}
}
.proMsg {
	font-size: 16px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.proBox {
	background: #fff;
	padding: 20upx;
	margin-top: 10upx;
}
.newPrice {
	font-size: 18px;
	color: #ff2323;
}
.oldPrice {
	color: #969696;
	font-size: 12px;
	text-decoration: line-through;
}
.choice {
	background: #fff;
	padding: 15upx 20upx;
	overflow: hidden;
	clear: right;
	margin-top: 20upx;
	font-size: 15px;
}
.right {
	float: right;
}
.jiantou {
	width: 28upx;
	height: 28upx;
	margin-top: 10upx;
}
.pay {
	margin-left: 60upx;
}

/* 店铺 */
.shop {
	background-color: #ffffff;
	.shop-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 40upx 20upx;

		> view {
			display: flex;
			flex-direction: row;
			align-content: center;
		}

		.top-left {
			width: 90upx;
			height: 90upx;
			margin-right: 25upx;
		}

		.top-middle {
			font-size: 28upx;
			color: #333333;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.middle-bottom {
				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #ededed;
				border-radius: 50upx;
				padding: 0 20upx;

				text {
					margin-right: 15upx;
				}

				image {
					width: 20upx;
					height: 20upx;
				}
			}
		}

		.top-right {
			width: 42upx;
			height: 42upx;
		}
	}
}

// 店铺信息
.shop-info {
	padding: 0 20upx;
	display: flex;
	flex-direction: row;
	padding-bottom: 30upx;
	.info-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #333;
		font-size: 28upx;
		width: 50%;
		position: relative;

		text:first-child {
			margin-bottom: 20upx;
		}
	}
	.info-left:after {
		content: '';
		width: 2px;
		height: 50%;
		background-color: #e1e1e1;
		position: absolute;
		top: 28%;
		right: 0;
	}
	.info-right {
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 28upx;
		color: #333333;
		width: 50%;
		view {
			padding-top: 30upx;
			text {
				margin-left: 20upx;
			}
		}
	}
}

// 店铺商品信息
scroll-view {
	white-space: nowrap;
	margin: 0 30upx;
}
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}
.shop-middle {
	width: 96%;
	margin: auto;
	padding-bottom: 35upx;
	height: 580upx;
	.middle-row {
		width: 29.5%;
		display: inline-block;
		margin-right: 3%;
		&:nth-of-type(3n) {
			margin-right: 1.5%;
		}
		&:nth-of-type(3n + 1) {
			margin-left: 3%;
		}
		image {
			width: 100%;
			height: 200upx;
			border-radius: 10upx;
		}

		.row-bottom {
			display: flex;
			flex-direction: row;
			align-items: flex-end;

			view {
				color: #ff3333;
				font-size: 38upx;
				margin-right: 18upx;
			}
			> text {
				color: #666666;
				font-size: 26upx;
				text-decoration: line-through;
			}
		}
	}
	.middle-row:last-child {
		margin-right: 0;
	}
}

// 店铺操作
.shop-operation {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-bottom: 40upx;

	.operation-row:first-child {
		margin-right: 60upx;
	}
	.operation-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #cccccc;
		border-radius: 50upx;
		font-size: 27upx;
		color: #333333;
		padding: 13upx 40upx;
		width: 22%;

		image {
			width: 40upx;
			height: 40upx;
		}
	}
}

.detail {
	background: #fff;
	margin-top: 20upx;
	padding: 20upx 0;
}
.detailTit {
	text-align: center;
	font-size: 17px;
	margin-bottom: 10upx;
}
.detail image {
	width: 100%;
	height: 900upx;
}

// 热销推荐
.recommend {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 30upx 30upx 28upx 30upx;
	font-size: 28upx;
	color: #333333;

	uni-navigator {
		color: #ff3333;
	}
}
.goods {
	margin: 0 30upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;

	.goods-col {
		width: 48%;
		margin-bottom: 30upx;
		background-color: #fff;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		border-bottom-left-radius: 10upx;
		border-bottom-right-radius: 10upx;

		image {
			width: 100%;
			height: 340upx;
			border-top-left-radius: 10upx;
			border-top-right-radius: 10upx;
			display: block;
			border: none;
		}

		.goods-bottom {
			background-color: #ffffff;
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			padding: 20upx 20upx;

			view:first-child {
				color: #333333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 28upx;
				margin-bottom: 10upx;
			}
			// view:nth-child(2){
			// 	color: #b3b3b3;
			// 	font-size: 25upx;
			// 	margin-bottom: 15upx;
			// }
			view:last-child {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #ff3a43;
				font-size: 30upx;

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
	}
}

.payBtn {
	width: 100%;
	height: 100upx;
	/* padding: 10upx 0; */
	color: #000;
	font-size: 15px;
	position: fixed;
	z-index: 9;
	bottom: 0;
	display: flex;
	background: #fff;
}
.payBtn image {
	width: 50upx;
	height: 50upx;
	margin-top: 10upx;
	margin-bottom: -5upx;
}
.carBox {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 99;
}
.box {
	background: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
}
.sureBtn {
	width: 100%;
	background: #ff2323;
	color: #fff;
	padding: 25upx 0;
	text-align: center;
	font-size: 15px;
}
.head {
	margin-top: 50upx;
	padding: 0 30upx;
	position: relative;
	/* display: flex; */
}
.price {
	font-size: 18px;
	font-weight: 600;
}
.head > view {
	margin-right: 20upx;
	display: inline-block;
	vertical-align: middle;
}
.proImg {
	width: 200upx;
	height: 200upx;
	vertical-align: middle;
}
// .flex{
// 	/* display: flex; */
// 	padding: 0 20upx ;
// }
// .flex>view{
// 	display: inline-block;
// 	margin-right: 20upx;
// 	border-radius: 8upx;
// 	background: #f2f2f2;
// 	font-size: 12px;
// 	padding: 5upx 20upx;
// }
.carBtn {
	width: 55upx;
	height: 55upx;
	vertical-align: middle;
}
.closeImg {
	position: absolute;
	width: 55upx;
	height: 55upx;
	top: 0;
	right: 0;
}
.clearB {
	margin-top: 50upx;
	margin-bottom: 40upx;
	padding: 20upx;
}
.active {
	color: #ff2323;
	border: 1px solid #ff2323;
	background: #fff !important;
}
.proDescribe {
	font-size: 13px;
	color: #969696;
	margin: 10upx 0;
	margin-top: 20upx;
	text-align: center;
	clear: both;
	overflow: hidden;
}
.left {
	float: left;
}
.kefu {
	text-align: center;
	width: 16%;
	font-size: 12px;
	position: relative;
}
.kefu:after {
	content: '';
	position: absolute;
	top: 22%;
	right: 0;
	width: 1px;
	height: 60%;
	background-color: #ccc;
}
.shoucang {
	text-align: center;
	width: 16%;
	font-size: 12px;
}
.addCar {
	width: 30%;
	text-align: center;
	color: #fff;
	line-height: 100upx;
	background: #ff9933;
}
.payTo {
	width: 30%;
	line-height: 100upx;
	text-align: center;
	color: #fff;
	background: #ff3a5a;
}
.evaluate {
	margin-top: 20upx;
	background: #fff;
	padding: 20upx;
	margin-bottom: 30upx;
	.icon_star {
		background: #fff;
		padding-top: 10upx;
		image {
			padding: 0;
			width: 20upx;
			height: 20upx;
		}
	}
}
.evaluateH {
	overflow: hidden;
	clear: right;
	font-size: 14px;
}
.redFont {
	color: #ff2323;
	font-size: 13px;
}
.evaluateImg {
	margin-top: 15upx;
}
.evaluateImg image {
	width: 80upx;
	height: 80upx;
	vertical-align: middle;
	border-radius: 50%;
	margin-right: 20upx;
}
.evaluateImg text {
	font-size: 13px;
	color: #969696;
}
.evaluateTitle {
	font-size: 14px;
	margin: 15upx 0;
}
.evaluateImg-list image {
	width: 30%;
	height: 200upx;
	border-radius: 10upx;
	margin: 10upx;
}
.imgArr {
	position: absolute;
	width: 94%;
	padding: 20upx;
	top: 20upx;
	left: 0;
	clear: both;
	overflow: hidden;
	z-index: 9999;
}
.imgArr > image {
	width: 64upx;
	height: 64upx;
}
</style>
